<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-tab-title li[lay-id="home"] i.layui-tab-close {
            display: none;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="#!home">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">库存管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#!stock">库存信息</a></dd>
                        <dd><a href="#!check">盘点信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">基础数据</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#!product">商品设置</a></dd>
                        <dd><a href="#!depot">仓库设置</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="content-header">
            <div class="layui-tab nav-tabs" lay-filter="nav-tabs" lay-allowClose="true">
                <ul class="layui-tab-title">
                    <li lay-id="home" class="nav-tabs-home"><i class="layui-icon layui-icon-home" style="font-size: 30px; color: #ccc;"></i> </li>
                </ul>
            </div>
        </div>
        <div class="content-body"></div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="layui/layui.js"></script>
<script src="js/q.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['jquery', 'element', 'layer', 'laytpl'], function() {
        var element = layui.element, $ = layui.$;
        var container = $(".content-body"); //页面容器
        element.render("nav-tabs");//加载路由
        Q.reg([
            //注册页面
            ['home', function() {
                container.load('view/home/home.html');
            }],
            ['stock', function() {
                container.load('view/stock/stock.html');
            }],
            ['check', function() {
                container.load('view/stock/check.html');
            }],
            ['depot', function() {
                container.load('view/base/depot.html');
            }],
            ['product', function() {
                container.load('view/base/product.html');
            }],
        ]);

        Q.init({
            index: 'home',
            pop: function (vid) {
                // hash改变执行
                var dom;
                var sidelayUi = false;
                if (dom = $('.layui-nav dd.layui-this')) {
                    dom.removeClass("layui-this");
                    dom.parents("li.layui-nav-item").removeClass("layui-nav-itemed");
                }
                if (dom = $('.layui-nav a[href="#!' + vid + '"]')) {
                    dom.parent("dd").addClass("layui-this");
                    dom.parents("li.layui-nav-item").addClass("layui-nav-itemed");
                    if ($(".layui-tab-title li[lay-id]").length <= 0) { // 如果没有首页
                        element.tabAdd('nav-tabs', {
                            title: dom.html() || "tab项",
                            id: vid
                        });
                    } else {
                        // 如果首页存在，首先遍历lay-id，判断是否是左侧菜单点出来的hash，
                        $.each($(".layui-tab-title li[lay-id]"), function() {
                            if ($(this).attr("lay-id") === vid) {
                                sidelayUi = true;
                            }
                        });
                        //hash值不是从左侧菜单里获取的hash值
                        if (!sidelayUi) {
                            var title;
                            if (vid === "stock-addOutBill") {
                                title = "出货申请单详情";
                            } else if (vid === "stock-enterBillDetails") {
                                title = "入库单详情";
                            } else if (vid === "stock-outBillDetails") {
                                title = "出库单详情";
                            } else if (vid === "depot-position") {
                                title = "库位详情";
                            }
                            element.tabAdd('nav-tabs', {
                                title: dom.html() || title,
                                id: vid
                            });
                        }
                    }
                    //hash定位 - 点击左侧菜单切换
                    // element.tabChange('nav-tabs', vid);
                }
            }
        });

        //hash定位，监听Tab切换，以改变地址hash值 - 点击nav项切换
        element.on('tab(nav-tabs)', function() {
            location.hash = '#!' + this.getAttribute('lay-id');
        });

    });
</script>
</body>
</html>